import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createStackNavigator } from 'react-navigation';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';

import LoginScreen from '../components/LoginScreen';
import MainScreen from '../components/MainScreen';
import ProfileScreen from '../components/ProfileScreen';
import StackViewStyleInterpolator from "react-navigation/src/views/StackView/StackViewStyleInterpolator";

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
);

const RootNavigator = createStackNavigator({
  Login: { screen: LoginScreen },
  Main: { screen: MainScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Main',
  mode: 'card',
  headerMode: 'screen',
  cardStyle: {
    backgroundColor: '#F4F4F4',
  },
  navigationOptions: () => ({
    gesturesEnabled: true,
    headerBackTitle: null,
    headerTintColor: 'blue',
    headerStyle: {
      backgroundColor: 'red',
      borderBottomWidth: 0,
      elevation: 0,
    },
    headerTitleStyle:{alignSelf:'center'},
  }),
  transitionConfig: () => ({
    screenInterpolator: StackViewStyleInterpolator.forHorizontal,
  })}
);

const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav,
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);

export { RootNavigator, AppNavigator, middleware };
